pub fn graphiql_source(graphql_endpoint_url: &str) -> String {
    r##"
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="robots" content="noindex" />
  <meta name="referrer" content="origin" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Lab Graphiql API</title>
  <style>
    body {
      margin: 0;
    }

    #graphiql {
      height: 100dvh;
    }

    .loading {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 4rem;
    }
  </style>
  <link rel="icon" href="favicon.ico" />
  <link rel="stylesheet" href="https://esm.sh/graphiql/dist/style.css" />
  <link
    rel="stylesheet"
    href="https://esm.sh/@graphiql/plugin-explorer/dist/style.css"
  />
  <!-- Note: the ?standalone flag bundles the module along with all of its `dependencies`, excluding `peerDependencies`, into a single JavaScript file. -->
  <!-- `@emotion/is-prop-valid` is a shim to remove the console error `module "@emotion /is-prop-valid" not found`. Upstream issue: https://github.com/motiondivision/motion/issues/3126 -->
  <script type="importmap">
    {
      "imports": {
        "react": "https://esm.sh/react@19.1.0",
        "react/jsx-runtime": "https://esm.sh/react@19.1.0/jsx-runtime",

        "react-dom": "https://esm.sh/react-dom@19.1.0",
        "react-dom/client": "https://esm.sh/react-dom@19.1.0/client",
        "@emotion/is-prop-valid": "data:text/javascript,",

        "graphiql": "https://esm.sh/graphiql?standalone&external=react,react-dom,@graphiql/react,graphql",
        "@graphiql/plugin-explorer": "https://esm.sh/@graphiql/plugin-explorer?standalone&external=react,@graphiql/react,graphql",
        "@graphiql/react": "https://esm.sh/@graphiql/react?standalone&external=react,react-dom,graphql,@emotion/is-prop-valid",

        "@graphiql/toolkit": "https://esm.sh/@graphiql/toolkit?standalone&external=graphql",
        "graphql": "https://esm.sh/graphql@16.11.0"
      }
    }
  </script>
<script type="module">
  // Import React and ReactDOM
  import React from 'react';
  import ReactDOM from 'react-dom/client';
  // Import GraphiQL and the Explorer plugin
  import { GraphiQL, HISTORY_PLUGIN } from 'graphiql';
  import { createGraphiQLFetcher } from '@graphiql/toolkit';
  import { explorerPlugin } from '@graphiql/plugin-explorer';

  import createJSONWorker from 'https://esm.sh/monaco-editor/esm/vs/language/json/json.worker.js?worker';
  import createGraphQLWorker from 'https://esm.sh/monaco-graphql/esm/graphql.worker.js?worker';
  import createEditorWorker from 'https://esm.sh/monaco-editor/esm/vs/editor/editor.worker.js?worker';

  globalThis.MonacoEnvironment = {
    getWorker(_workerId, label) {
      console.info('MonacoEnvironment.getWorker', { label });
      switch (label) {
        case 'json':
          return createJSONWorker();
        case 'graphql':
          return createGraphQLWorker();
      }
      return createEditorWorker();
    },
  };

  // Parse the search string to get url parameters.
  var search = window.location.search;
  var parameters = {};
  search
    .substr(1)
    .split('&')
    .forEach(function(entry) {
      var eq = entry.indexOf('=');
      if (eq >= 0) {
        parameters[decodeURIComponent(entry.slice(0, eq))] =
          decodeURIComponent(entry.slice(eq + 1));
      }
    });

  // if variables was provided, try to format it.
  if (parameters.variables) {
    try {
      parameters.variables = JSON.stringify(
        JSON.parse(parameters.variables),
        null,
        2,
      );
    } catch (e) {
      // Do nothing, we want to display the invalid JSON as a string, rather
      // than present an error.
    }
  }

  // When the query and variables string is edited, update the URL bar so
  // that it can be easily shared
  function onEditQuery(newQuery) {
    parameters.query = newQuery;
    updateURL();
  }

  function onEditVariables(newVariables) {
    parameters.variables = newVariables;
    updateURL();
  }

  function onEditOperationName(newOperationName) {
    parameters.operationName = newOperationName;
    updateURL();
  }

  function updateURL() {
    var newSearch =
      '?' +
      Object.keys(parameters)
        .filter(function(key) {
          return Boolean(parameters[key]);
        })
        .map(function(key) {
          return (
            encodeURIComponent(key) +
            '=' +
            encodeURIComponent(parameters[key])
          );
        })
        .join('&');
    history.replaceState(null, null, newSearch);
  }

  const fetcher = createGraphiQLFetcher({
    url:
      'GRAPHQL_URL',
  });
  const plugins = [HISTORY_PLUGIN, explorerPlugin()];

  function App() {
    return React.createElement(GraphiQL, {
      fetcher: fetcher,
      initialQuery: parameters.query,
      initialVariables: parameters.variables,
      operationName: parameters.operationName,
      onEditQuery: onEditQuery,
      onEditVariables: onEditVariables,
      onEditOperationName: onEditOperationName,
      plugins,
    });
  }

  const container = document.getElementById('graphiql');
  const root = ReactDOM.createRoot(container);
  root.render(React.createElement(App));
</script>
</head>
<body>
<div id="graphiql">
  <div class="loading">Loading…</div>
</div>
</body>
</html>
    "##.replace("GRAPHQL_URL", graphql_endpoint_url)

}

